<!--Created by kevin on 15-6-23.-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <title>音乐播放器</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <!--load style-->
  <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
  <link href="assets/css/bootstrap-slider.min.css" rel="stylesheet" />
  <link href="assets/css/my.css" rel="stylesheet" />
  <!-- Insert this line above script imports  -->
  <script>
    if (typeof module === 'object') {
            window.module = module;
            module = undefined;
        }
    </script>
  <!-- normal script imports etc  -->
  <script src="assets/js/jquery.min.js"></script>
  <!-- Insert this line after script imports -->
  <script>
    if (window.module) module = window.module;
    </script>
  <!--link(href='http://cdn.bootcss.com/bootstrap-material-design/0.3.0/css/material-fullpalette.min.css',rel='stylesheet')-->
</head>
<body>
<div id="wrapper">
  <!-- navgation bar-->
  <nav class="navbar navbar-fixed-top navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button data-toggle="collapse" data-target="ncollapse" class="navbar-toggle collapsed">
          <span class="sr-only">切换导航栏</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="javascript:void(0)">音乐播放器</a></div>
      <div id="ncollapse" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li id="main-nav" class="active">
            <a href="javascript:nav.setState(0)">首页</a></li>
          <li id="radio-nav">
            <a href="javascript:nav.setState(1)">私人FM</a></li>
          <li id="settings-nav">
            <a href="javascript:nav.setState(2)">设置</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li class="dropdown">
            <a id="user-profile" data-toggle="dropdown" class="dropdown-toggle" href="javascript:void(0)">
              <img src="" onError="this.src='assets/img/avater.jpg'" class="img-circle">
              <p>未登录</p>
              <span class="caret"></span>
              <ul role="menu" class="dropdown-menu">
                <li id="menugo-0">
                  <a href="javascript:nav.clickMenu(0)">
                    <span class="glyphicon glyphicon-log-in"></span>登录</a>
                </li>
                <li id="menugo-1">
                  <a href="javascript:nav.clickMenu(1)">
                    <span class="glyphicon glyphicon-log-out"></span>注销</a>
                </li>
              </ul>
            </a>
          </li>
          <li>
            <a href="javascript:nav.toggleWindow(false)">
              <span class="glyphicon glyphicon-resize-small" title="Mini模式"></span>
            </a>
          </li>
        </ul>
        <div class="navbar-right">
          <form class="navbar-form navbar-left">
            <div class="input-group">
              <input id="search" type="text" placeholder="搜索音乐..." class="form-control">
              <span class="input-group-btn">
                <a href="javascript:nav.search()" class="btn btn-default">
                  <span class="glyphicon glyphicon-search"></span>
                </a>
              </span>
            </div>
          </form>
        </div>
      </div>
    </div>
  </nav>
  <!--end of navgation bar-->
  <div id="page" class="container-fluid">
    <div id="main" class="row">
      <div id="sidebar">
        <div id="entry"></div>
        <div id="plts-tools">
          <span class="glyphicon glyphicon-refresh" title="更新列表" id="refresh"></span>
          <span class="glyphicon glyphicon-plus" title="添加自定义列表" id="addlist"></span>
        </div>
      </div>
      <div class="list">
        <div class="twrap">
          <table class="table table-hover" style="display:none">
            <thead>
              <tr>
                <th>#</th>
                <th>标题</th>
                <th>专辑</th>
                <th>艺术家</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="song-detail">
      <div class="detail">
        <div class="cover">
          <img src="" alt="专辑封面" onError="this.src='assets/img/album.png'"></div>
        <ul class="info">
          <li>
            <h3 id="info-title"></h3>
          </li>
          <li>
            <span class="glyphicon glyphicon-cd"></span>专辑：
            <span id="info-album"></span></li>
          <li>
            <span class="glyphicon glyphicon-user"></span>艺术家：
            <span id="info-artist"></span></li>
        </ul>
      </div>
      <div class="lyric">
        <ul></ul>
      </div>
      <div role="group" class="btn-group-vertical lrc-tools">
        <a href="javascript:lrc.toggle(0)" class="btn">
          <span class="glyphicon glyphicon-minus"></span>
        </a>
        <a href="javascript:lrc.scroll(1)" class="btn">
          <span class="glyphicon glyphicon-arrow-up"></span>
        </a>
        <a href="javascript:lrc.scroll(-1)" class="btn">
          <span class="glyphicon glyphicon-arrow-down"></span>
        </a>
      </div>
    </div>
    <div id="settings" class="row" style="display:none">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">基本设置</h3>
        </div>
        <div class="panel-body">
          <form class="form-horizontal">
            <div class="form-group">
              <label for="music-dir" class="col-sm-3 control-label">自定义音乐文件夹</label>
              <div class="col-sm-9">
                <div class="input-group">
                  <input id="music-dir" disabled="disabled" type="text" class="form-control">
                  <span class="input-group-btn">
                    <button id="openDialog" type="button" class="btn btn-default">选择...</button></span>
                </div>
              </div>
            </div>
            <input id="dialog" nwdirectory type="file" style="display:none">
          </form>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">云音乐设置</h3>
        </div>
        <div class="panel-body">
          <form class="form-horizontal">
            <div class="form-group">
              <label for="search-limit" class="col-sm-3 control-label">歌曲最大搜索数</label>
              <div class="col-sm-9">
                <input id="search-limit" type="number" class="form-control"></div>
            </div>
          </form>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-body">
          <h3>设计&&实现: Kevin</h3>
          <p>Email:stkevintan@foxmail.com</p>
        </div>
      </div>
    </div>
    <!-- 收音机 -->
    <div id="radio" style="display:none"></div>
  </div>
  <div id="footer">
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-2 audio-control">
          <a href="javascript:player.playNext(-1)" id="backward">
            <span class="glyphicon glyphicon-step-backward"></span>
          </a>
          <a href="javascript:player.play()" id="play">
            <span class="glyphicon glyphicon-play"></span>
          </a>
          <a href="javascript:player.pause()" id="pause">
            <span class="glyphicon glyphicon-pause"></span>
          </a>
          <a href="javascript:player.playNext(1)" id="forward">
            <span class="glyphicon glyphicon-step-forward"></span>
          </a>
        </div>
        <div class="col-sm-7 audio-body">
          <div class="media">
            <div class="media-left">
              <a href="javascript:lrc.toggle()">
                <img id="song-pic" src="" onError="this.src='assets/img/album.png'" class="img-thumbnail media-object"></a>
            </div>
            <div class="media-body">
              <h4 class="media-heading">未选择音乐</h4>
              <p class="media-time">
                <span id="cur-time">00.00</span>/
                <span id="tot-time">00.00</span></p>
              <input>
            </div>
          </div>
        </div>
        <div class="col-sm-3 audio-adjust">
          <a href="javascript:category.toggleOpen()">
            <span class="glyphicon glyphicon-list"></span>
          </a>
          <a id="vol-wrapper" href="javascript:void(0)">
            <div id="vol-panel" class="popover top in">
              <div class="layer"></div>
              <div class="arrow"></div>
              <div class="popover-content">
                <input id="volume"></div>
            </div>
            <span class="glyphicon glyphicon-volume-up" title="音量" id="vol-icon" onclick="player.toggleVolMute()"></span>
          </a>
          <a href="javascript:player.setOrder()" id="order">
            <span class="glyphicon glyphicon-repeat" title="列表循环"></span>
          </a>
        </div>
        <div class="mini-tool">
          <a href="javascript:nav.toggleWindow(true)">
            <span class="glyphicon glyphicon-new-window" title="正常模式"></span>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- modal input-->
<div id="inputListName" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" data-dismiss="modal" aria-label="Close" class="close">
          <span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">添加自定义播放列表</h4>
      </div>
      <div class="modal-body">
        <form>
          <label class="control-label" style="display:none">糟糕，输入为空或者重名</label>
          <input type="text" placeholder="输入自定义播放列表" class="form-control"></form>
      </div>
      <div class="modal-footer">
        <button type="button" data-dismiss="modal" class="btn btn-default">撤销</button>
        <button id="submit-name" type="button" class="btn btn-primary">确定</button></div>
    </div>
  </div>
</div>
<div id="testAudio"></div>
<div id="login" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" data-dismiss="modal" aria-label="Close" class="close">
          <span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">手机或邮箱登录</h4>
      </div>
      <div class="modal-body">
        <form>
          <label class="control-label" style="display:none">糟糕，登录失败</label>
          <div class="form-group">
            <input name="phone" type="text" placeholder="手机号或者邮箱" class="form-control"></div>
          <div class="form-group">
            <input name="password" type="password" placeholder="密码" class="form-control"></div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" data-dismiss="modal" class="btn btn-default">撤销</button>
        <button type="button" data-loading-text="加载中..." class="btn btn-primary submit">确定</button></div>
    </div>
  </div>
</div>
<!--load script-->
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/bootstrap-slider.min.js"></script>
<script src="assets/js/sortable.js"></script>
<script src="assets/js/my.js"></script>
</body>
<!-- script(src='http://cdn.bootcss.com/bootstrap-material-design/0.3.0/js/material.min.js')-->
</html>
